@charset 'utf-8';
$font-size:40px;
@function ipn($px) {
    @return ($px/$font-size)*1rem;
}
html {
    font-size: $font-size;
}
html,body{
    width: 100%;
    height: 100%;
}
.web{
    width: 100%;
    min-height: 100%;
    background: url(../images/diwen.png);
    position: relative;
    .musicbutton{
        width: ipn(50px);
        height: ipn(50px);
        position: absolute;
        top: ipn(30px);
        right: ipn(30px);
        background: #E7C598;
        line-height: ipn(50px);
        border-radius: 50%;
        .iconfont{
            display: block;
            font-size: ipn(35px);
            color: #BF0C21;
            animation: music 4s infinite;
        }
        @keyframes music{
            from{
                transform: rotateZ(0);
            }
            to{
                transform: rotateZ(360deg);
            }
        }
         @-webkit-keyframes music{
            from{
                transform: rotateZ(0);
            }
            to{
                transform: rotateZ(360deg);
            }
        }
    }
    p{
        position: absolute;
        left: 50%;
        top: 30%;
        transform: translateX(-50%);
        font-size: ipn(31px);
        color: #E7C598;
        letter-spacing: ipn(5px);
    }
    input{
        position: absolute;
        left: 50%;
        top: 40%;
        transform: translateX(-50%);
        width: ipn(328px);
        height: ipn(53px);
        background: #E7C598;
        border-radius: ipn(10px);
        box-sizing: border-box;
        padding: ipn(10px);
    }
    .img{
        width: ipn(252px);
        height: ipn(45px);
        position: absolute;
        left: 50%;
        top: 55%;
        transform: translateX(-50%);
        img{
            width: 100%;
            height: 100%;
        }
    }
    .suc,.fal{
        display: none;
        width: 100%;
        height: 100%;
        background: rgba(255,255,255,0.5);
        position: fixed;
        left: 0;
        top: 0;
        .con{
            width: ipn(413px);
           height: ipn(250px);
           border-radius: ipn(10px);
           background: #e7c598;
           position: relative;
           top: 50%;
           left: 50%;
           transform: translate(-50%,-50%);
           text-align: center;
           .iconfont{
               position: absolute;
               top: 0;
               right: ipn(21px);
               font-size: ipn(45px);
               color: #bf0c21;
           }
        }
    }
    .suc{
        p{
            font-size: ipn(36px);
            color: #BF0C21;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
    }
    .fal{
        box-sizing: border-box;
        padding-top: ipn(83px);
        padding-bottom:ipn(80px) ;
        p{
            font-size: ipn(31px);
            color: #BF0C21;
        }
        a{
            display: block;
            width: ipn(222px);
            height: ipn(38px);
            background: #BF0C21;
            color: #E7C598;
            text-align: center;
            line-height: ipn(38px);
            border-radius: ipn(10px);
            font-size: ipn(20px);
            position: absolute;
            left: 50%;
            top: 60%;
            transform: translateX(-50%);
        }
    }
    .return{
        width: ipn(41px);
        height: ipn(41px);
        border-radius: 50%;
        background: #e7c598;
        text-align: center;
        line-height: ipn(41px);
        position: absolute;
        right: ipn(56px);
        bottom: ipn(25px);
        .iconfont{
            font-size: ipn(28px);
            color: #bf0c21;
        }
    }
}
